<template>
  <div class="sci-hot-page">
    <el-tabs class="sci-hot-tabs" v-model="tabActive" @tab-click="handleTabClick">
      <el-tab-pane label="数学" name="数学">
      </el-tab-pane>
      <el-tab-pane label="人工智能" name="人工智能">
      </el-tab-pane>
    </el-tabs>
    <div class="hot-list">
      <div class="hot-item" v-for="item in dataList" :key="item.id">
        <a class="title" :href="item.link" target="_blank">{{item.ai_title}}</a>
        <div class="desc">{{item.ai_abstract}}</div>
      </div>
    </div>
    <div class="condition-box">
      <div>&nbsp;</div>
      <div class="search-box">
        <el-input
            clearable
            class="header-search-input"
            v-model="condition.searchText"
            size="default"
            placeholder="输入关键字搜索"
            :suffix-icon="Search"
            @change="handleSearch"
        />
      </div>
      <el-date-picker
          v-model="condition.daterange"
          type="daterange"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
          @change="handleSearch"/>
    </div>
    <div class="pagination-box">
      <el-pagination
          v-model:current-page="condition.pageIndex"
          v-model:page-size="condition.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="condition.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
    </div>

  </div>

</template>

<script setup>
import {ref} from 'vue'
import { Search } from '@element-plus/icons-vue'
import api from '../../api/index.js'

const tabActive = ref('数学')

const condition = ref({
  daterange: [],
  searchText: '',
  pageIndex: 1,
  pageSize: 20,
  total: 0,
})
const shortcuts = [
  {
    text: '前一日',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
      return [start, end]
    },
  },
  {
    text: '前三日',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
      return [start, end]
    },
  },
  {
    text: '前一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },

]
const dataList = ref([])

const getPageData = () => {
  dataList.value = []
  const params = {
    "primary_discipline": tabActive.value,
    "search_text": condition.value.searchText || '',
    "page_index": condition.value.pageIndex,
    "page_size": condition.value.pageSize,
  }
  if (condition.value.daterange && condition.value.daterange.length === 2) {
    params.start_time = condition.value.daterange[0]
    params.end_time = condition.value.daterange[1]
  }
  api.hotList(params).then(res => {
    condition.value.total = res.total_num || 0
    if (res.hot_list && res.hot_list.length) {
      dataList.value = res.hot_list
    }
  })

}
const handleSearch = () => {
  condition.value.pageIndex = 1
  getPageData()
}
const handleTabClick = () => {
  handleSearch()
}
const handleSizeChange = () => {
  handleSearch()
}
const handleCurrentChange = () => {
  getPageData()
}
handleSearch()


</script>
<style scoped lang="scss">
.sci-hot-page{
  position: relative;
  height: 100%;
}
.sci-hot-tabs{
  position: relative;
}
.condition-box{
  position: absolute;
  top:-5px;
  left:0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hot-list{
  position: relative;
  height: calc(100% - 100px);
  .hot-item{
    position: relative;
    margin-bottom: 35px;
    .title{
      font-size: 1.6rem;
      color: var(--el-color-primary);
      margin-bottom: 5px;
      display: inline-block;
      word-break: break-all;
      white-space: pre-wrap;
    }
    .desc{
      font-size: 1.4rem;
      line-height: 2.4rem;
      word-break: break-all;
      white-space: pre-wrap;
      opacity: 0.75;
    }
  }
}
.pagination-box{
  padding-top: 20px;
  float: right;
}
</style>
<style lang="scss">
.sci-hot-tabs{
  .el-tabs__item{
    font-size: 1.6rem;
  }

}
.sci-hot-page{
  .el-date-editor.el-input, .el-date-editor.el-input__wrapper{
    max-width: 260px;
  }
}
</style>
